// src/pages/shizhiran/interest.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './gender.css';

const Interest: React.FC = () => {
    const [selectedInterests, setSelectedInterests] = useState<string[]>([]);
    const [isNextEnabled, setIsNextEnabled] = useState<boolean>(false);
    const navigate = useNavigate();

    const interests = [
        { key: 'aerobic', label: '有氧训练' },
        { key: 'strength', label: '力量训练' },
        { key: 'equipment', label: '器械训练' },
        { key: 'dance', label: '舞蹈练习' },
        { key: 'yoga', label: '瑜伽' }
    ];

    const toggleInterest = (key: string) => {
        if (selectedInterests.includes(key)) {
            setSelectedInterests(selectedInterests.filter(i => i !== key));
        } else {
            setSelectedInterests([...selectedInterests, key]);
            setIsNextEnabled(true);
        }
    };

    const handleNext = () => {
        if (selectedInterests.length > 0) {
            console.log('Selected interests:', selectedInterests);
            window.location.href = '/generatingplan'; // 跳转到生成计划页
        }
    };

    const handleBack = () => {
        navigate('/traininglevel');
    };

    const handleSkip = () => {
        navigate('/generatingplan');
    };

    return (
        <div className="container">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 0' }}>
                <button className="back-button" onClick={handleBack}>
                    ←
                </button>
                <div className="progress-bar">
                    <div className="progress" style={{ width: '100%' }}></div>
                </div>
                <button style={{ fontSize: '14px', color: '#666', background: 'none', border: 'none' }} onClick={handleSkip}>跳过</button>
            </div>

            <div className="title">选择感兴趣的内容</div>

            <div className="options-container">
                {interests.map((item) => (
                    <div
                        key={item.key}
                        className={`option-card ${selectedInterests.includes(item.key) ? 'selected' : ''}`}
                        onClick={() => toggleInterest(item.key)}
                    >
                        <div className="option-title">{item.label}</div>
                        <div className="checkbox">
                            <div className={`check-icon ${selectedInterests.includes(item.key) ? 'checked' : ''}`}>
                                {selectedInterests.includes(item.key) && (
                                    <svg viewBox="0 0 24 24" width="16" height="16">
                                        <path fill="#fff" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
                                    </svg>
                                )}
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            <button
                className={`next-button1 ${selectedInterests.length > 0 ? 'enabled' : 'disabled'}`}
                onClick={handleNext}
                disabled={!isNextEnabled}

            >
                下一步
            </button>
        </div>
    );
};

export default Interest;